<script setup lang='ts'>
  import { numberApi } from '@/api/controller';
  import { ToastSuccess, Toastloading } from '@/utils/public';
  import { ElMessageBox } from 'element-plus';
  import { reactive } from 'vue';
  const props = defineProps({
    listfun:{
      type:Function,
      default:()=>{}
    }
  })
  const $emit = defineEmits(['serach'])
  const action = reactive({
    sortOptions: [
      { label: "正序", key: "asc" },
      { label: "倒序", key: "desc" },
    ],
  })
  const listQuery = reactive({
    uuid: "",
    user_id: "",
    nickname: "",
    mobile_phone:"",
    is_block:"",
    active_certify:"",
    liang:"",
    super:"",
    waiter:"",
    official:"",
    sort:"asc"
  })
  const handleFilter = ()=>{
    $emit('serach',listQuery)
    props.listfun(listQuery)
  }
  const removeCode = ()=>{
    ElMessageBox.prompt('手机号', '清除验证码次数', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      inputPattern:
        /^1[3456789]\d{9}$/,
      inputPlaceholder:'请填写需要清除的手机号',
      inputErrorMessage: '请填写需要清除的手机号',
    })
    .then(async({ value }) => {
      const loading = Toastloading()
      await numberApi.phonoCodeReset({phone:value})
      loading.close()
      ToastSuccess('重置成功')
    }).catch(() => { })
  }
  const resetQuery = ()=>{
    Object.assign(listQuery,{
      uuid: "",
      user_id: "",
      nickname: "",
      mobile_phone:"",
      is_block:"",
      active_certify:"",
      liang:"",
      super:"",
      waiter:"",
      official:"",
      sort:"asc"
    })
    handleFilter()
  }
  defineExpose({
    listQuery
  })
</script>

<template>
  <div class="labelBox">
    <div class="labelItem">
      <div class="label">用户UUID：</div>
      <el-input v-model="listQuery.uuid" placeholder="请输入用户UUID"  />
    </div>
    <div class="labelItem">
      <div class="label">用户ID：</div>
      <el-input v-model="listQuery.user_id" placeholder="请输入用户ID： " class="xm-ml10"  />
    </div>
    <div class="labelItem">
      <div class="label">用户昵称：</div>
      <el-input v-model="listQuery.nickname" placeholder="请输入用户昵称" class="xm-ml10"  />
    </div>
    <div class="labelItem" v-rule="'number_look_mobile'">
      <div class="label">手机号：</div>
      <el-input v-model="listQuery.mobile_phone" placeholder="请输入用户手机号"  />
    </div>
    <div class="labelItem">
      <div class="label">状态：</div>
      <el-select v-model="listQuery.is_block" placeholder="状态">
        <el-option label="全部" value="" />
        <el-option label="正常" value="0" />
        <el-option label="封号" value="1" />
      </el-select>
    </div>
    <div class="labelItem">
      <div class="label">认证：</div>
      <el-select v-model="listQuery.active_certify" placeholder="认证">
        <el-option label="全部" value="" />
        <el-option label="未认证" value="0" />
        <el-option label="已认证" value="1" />
      </el-select>
    </div>
    <div class="labelItem" v-rule="'number_setgoodmobilenumber'">
      <div class="label">靓号：</div>
      <el-select v-model="listQuery.liang" placeholder="靓号">
        <el-option label="全部" value="" />
        <el-option label="非" value="0" />
        <el-option label="是" value="1" />
      </el-select>
    </div>
    <div class="labelItem" v-rule="'number_setsuper'">
      <div class="label">超管：</div>
      <el-select v-model="listQuery.super" placeholder="超管">
        <el-option label="全部" value="" />
        <el-option label="非" value="0" />
        <el-option label="是" value="1" />
      </el-select>
    </div>
    <div class="labelItem" v-rule="'number_setwaiter'">
      <div class="label">巡房：</div>
      <el-select v-model="listQuery.waiter" placeholder="巡房">
        <el-option label="全部" value="" />
        <el-option label="非" value="0" />
        <el-option label="是" value="1" />
      </el-select>
    </div>
    <div class="labelItem" v-rule="'number_setofficial'">
      <div class="label">官方：</div>
      <el-select v-model="listQuery.official" placeholder="官方">
        <el-option label="全部" value="" />
        <el-option label="非" value="0" />
        <el-option label="是" value="1" />
      </el-select>
    </div>
    <div class="labelItem">
      <div class="label">排列顺序：</div>
      <el-select v-model="listQuery.sort" @change="handleFilter">
        <el-option v-for="item in action.sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
    </div>
  </div>
  <div class="labelBox">
    <div class="labelItem">
      <el-button type="primary" @click="handleFilter">查询</el-button>
      <el-button type="primary" @click="resetQuery">重置</el-button>
      <el-button type="primary" v-rule="'number_removecode'" @click="removeCode">清除验证码次数</el-button>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  
</style>